<template>
	<view class="content">
		<guanggao></guanggao>
		<sousuo></sousuo>
		<view class="uni-margin-wrap">
			<swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval"
				:duration="duration">
				<swiper-item>
					<view class="swiper-item">
						<image src="../../static/lunbotu1.webp" mode=""></image>
					</view>
				</swiper-item>
				<swiper-item>
					<view class="swiper-item">
						<image src="../../static/lunbotu2.webp" mode=""></image>
					</view>
				</swiper-item>
				<swiper-item>
					<view class="swiper-item">
						<image src="../../static/lunbotu3.webp" mode=""></image>
					</view>
				</swiper-item>
				<swiper-item>
					<view class="swiper-item">
						<image src="../../static/lunbotu4.webp" mode=""></image>
					</view>
				</swiper-item>
				<swiper-item>
					<view class="swiper-item">
						<image src="../../static/lunbotu5.webp" mode=""></image>
					</view>
				</swiper-item>
			</swiper>
		</view>
		<navigator url="/pages/phone/phone" >
			<fiveborder></fiveborder>
		</navigator>
		
		<view class="backTotop">
			<image src="../../static/backtotop.png" mode="" @click="Totop"></image>
		</view>
		<!-- 手机 -->
		<view class="border1box">
			<image src="../../static/border1.webp" mode=""></image>
		</view>
		<view class="shouyebox">
			<shouye v-for="item in shouyeinfo.slice(0,9)" :shouyeinfo="item"></shouye>
			<!--<navigator url="/pages/shopdetail/shopdetail?id=(index)" v-for="(item,index) in shopinfo">
				<shouye :shouyeinfo="item" num="100"></shouye>
			</navigator> -->
		</view>
		<!-- 今日必抢 -->
		<view class="jrbq">
			<view class="time">
					<text>今日秒杀</text>
					<view class="shijian" style="color: red; font-size: 16rpx;">{{countdownh}}:</view>
					
					<view class="shijian" style="color: red; font-size: 16rpx;">{{countdownm}}:</view>
				
					<view class="shijian" style="color: red; font-size: 16rpx;">{{countdowns}}</view>
					<text class="shijian" style="color: gray; font-size: 16rpx;">后结束</text>
			</view>
			<scroll-view class="scroll-X" scroll-x="true">
				<view class="scroll-x-box">
					<view class="scroll-view">
						<image
							src="https://msecfs.opposhop.cn/commons-media-picture/GOODS/20231117/324ad42982ede281bb8650c3246ff004783610612.png?_w_=480&_h_=480&x-oss-process=image%2Fresize%2Cm_mfit%2Climit_1%2Cw_480%2Ch_480%2Fformat%2Cwebp">
						</image>
						<view class="jrms">芒果TV会员 30 天卡礼包</view>
						<view class="jrms">￥6</view>
					</view>
					<view class="scroll-view">
						<image
							src="https://msecfs.opposhop.cn/commons-media-picture/GOODS/20230417/b30dec70dd2d9fdc5e44569f753f6d4b746864941.png?_w_=320&_h_=320&x-oss-process=image%2Fformat%2Cwebp">
						</image>
						<view class="jrms">【限量秒杀】一加 Ace 2 原神定制礼盒 18GB+512GB 熔岩红</view>
						<view class="jrms">￥2799</view>
					</view>
					<view class="scroll-view">
						<image
							src="https://msecfs.opposhop.cn/commons-media-picture/GOODS/20231109/3e3a827d43cc1dfec79a378a2f97f7281368624484.jpg?_w_=480&_h_=480&x-oss-process=image%2Fresize%2Cm_mfit%2Climit_1%2Cw_480%2Ch_480%2Fformat%2Cwebp">
						</image>
						<view class="jrms">腾讯视频超级影视VIP月卡礼包</view>
						<view class="jrms">￥20</view>
					</view>
					<view class="scroll-view">
						<image
							src="https://dsfs.oppo.com/omp/1648026444146-_-aec69d795e3e4693843e5a3346677a5a.png?_w_=600&_h_=600&x-oss-process=image%2Fformat%2Cwebp">
						</image>
						<view class="jrms">贝医生 原力唤醒美白牙膏 100G 支 茉绿茶香 绿色</view>
						<view class="jrms">￥8</view>
					</view>
					<view class="scroll-view">
						<image
							src="https://dsfs.oppo.com/omp/1653999494925-_-557a91e7294241fca0727f16c7171473.png?_w_=600&_h_=600&x-oss-process=image%2Fformat%2Cwebp">
						</image>
						<view class="jrms">纸护仕 白色国潮系列抽取式面巾纸 6包装 CZ3R10 白色</view>
						<view class="jrms">￥12</view>
					</view>
					<view class="scroll-view">
						<image
							src="https://msecfs.opposhop.cn/commons-media-picture/MEDIA/20230427/4a47a0db6e60853dedfcfdf08a5ca2492055207403.png?_w_=600&_h_=600&x-oss-process=image%2Fformat%2Cwebp">
						</image>
						<view class="jrms">AlwaySmart 6.5A超级快充游戏数据线 尼龙铝合金弯头USB-A to Type-C 1.2m 银灰色</view>
						<view class="jrms">￥15</view>
					</view>
					<view class="scroll-view">
						<image
							src="https://msecfs.opposhop.cn/commons-media-picture/MEDIA/20230427/4a47a0db6e60853dedfcfdf08a5ca2492055207403.png?_w_=600&_h_=600&x-oss-process=image%2Fformat%2Cwebp">
						</image>
						<view class="jrms">AlwaySmart 6.5A超级快充数据线 USB-A to Type-C 1.0m 白色</view>
						<view class="jrms">￥14</view>
					</view>
					<view class="scroll-view">
						<image
							src="https://msecfs.opposhop.cn/commons-media-picture/GOODS/20231109/aaf51feb540fef8e09bb759dc64687c0-1690091912.png?_w_=480&_h_=480&x-oss-process=image%2Fresize%2Cm_mfit%2Climit_1%2Cw_480%2Ch_480%2Fformat%2Cwebp">
						</image>
						<view class="jrms">爱奇艺黄金VIP月卡礼包</view>
						<view class="jrms">￥18</view>
					</view>
					<view class="scroll-view">
						<image
							src="https://msecfs.opposhop.cn/commons-media-picture/MEDIA/20230823/bbc4a9ba2559317f6aba04c91f2e158a-636731404.png?_w_=1440&_h_=1440&x-oss-process=image%2Fresize%2Cm_mfit%2Climit_1%2Cw_480%2Ch_480%2Fformat%2Cwebp">
						</image>
						<view class="jrms">AlwaySmart 三合一数据线 1.2m 银灰色（非快充）</view>
						<view class="jrms">￥10</view>
						
					</view>
					<view class="scroll-view">
						<image
							src="https://msecfs.opposhop.cn/commons-media-picture/MEDIA/20230905/4a47a0db6e60853dedfcfdf08a5ca2491097179431.png?_w_=1440&_h_=1440&x-oss-process=image%2Fresize%2Cm_mfit%2Climit_1%2Cw_480%2Ch_480%2Fformat%2Cwebp">
						</image>
						<view class="jrms">舒客 小苏打牙膏（洁白护龈） 120g/支 白色</view>
						<view class="jrms">￥6</view>
					</view>
					<navigator url="/pages/xsms/xsms">
						<view class="scroll-view">
						<image src="../../static/gdcp.png"></image>
						</view>
					</navigator>
					
				</view>
			</scroll-view>
		</view>
		<!-- 耳机 -->
		<view class="border1box">
			<image src="../../static/border2.webp" mode=""></image>
		</view>
		<view class="shouyebox">
			<shouye v-for="item in shouyeinfo.slice(9,15)" :shouyeinfo="item"></shouye>
		</view>
		<!-- 手表 -->
		<view class="border1box">
			<image
				src="https://dsfs.oppo.com/archives/202308/2023082901082964ed7d11a7e0a.jpg?_w_=1008&_h_=300&x-oss-process=image%2Fformat%2Cwebp"
				mode=""></image>
		</view>
		<view class="shouyebox">
			<shouye v-for="item in shouyeinfo.slice(15,18)" :shouyeinfo="item"></shouye>
		</view>
		<!-- 平板 -->
		<view class="border1box">
			<image
				src="https://dsfs.oppo.com/archives/202303/20230323080349641c3faddac18.jpg?_w_=1008&_h_=300&x-oss-process=image%2Fformat%2Cwebp"
				mode=""></image>
		</view>
		<view class="shouyebox">
			<shouye v-for="item in shouyeinfo.slice(18,27)" :shouyeinfo="item"></shouye>
		</view>
		<!-- 配件 -->
		<view class="border1box">
			<image
				src="https://dsfs.oppo.com/archives/202105/2021052803055060b09f7218a29.png?_w_=1008&_h_=300&x-oss-process=image%2Fformat%2Cwebp"
				mode=""></image>
		</view>
		<view class="shouyebox">
			<shouye v-for="item in shouyeinfo.slice(27,36)" :shouyeinfo="item"></shouye>
		</view>
		<bottom></bottom>
	</view>
</template>

<script>
	export default {
		data() {

			return {
				background: ['color1', 'color2', 'color3'],
				indicatorDots: true,
				autoplay: true,
				interval: 2000,
				duration: 500,
				scrollTop: 0,
				old: {
					scrollTop: 0
				},
				
				countdownh:'',
				countdownm:'',
				countdowns:'',
				timer: null,
				
				page: 1,
				shouyeinfo: [{
						imgurl: '../../static/OPPO Reno 11.webp',
						title: 'OPPO Reno 11',
						price: 2999
					},
					{
						imgurl: '../../static/OPPO Find N3.webp',
						title: 'OPPO Find N3',
						price: 9999
					},
					{
						imgurl: '../../static/OPPO Find N3 Flip.webp',
						title: 'OPPO Find N3 Flip',
						price: 6799
					},
					{
						imgurl: '../../static/OPPO K11.webp',
						title: 'OPPO K11',
						price: 1599
					},
					{
						imgurl: '../../static/OPPO K10X.png',
						title: 'OPPO K10X',
						price: 1099
					},
					{
						imgurl: '../../static/一加 Ace2 pro.webp',
						title: '一加 Ace2 Pro',
						price: 3399
					},
					{
						imgurl: '../../static/一加 Ace2.webp',
						title: '一加 Ace 2',
						price: 2299
					},
					{
						imgurl: '../../static/一加 Ace 2v.webp',
						title: '一加 Ace 2V',
						price: 1799
					},
					{
						imgurl: '../../static/一加 Ace 11.webp',
						title: '一加 Ace 11',
						price: 4399
					},
					{
						imgurl: 'https://msecfs.opposhop.cn/commons-media-picture/GOODS/20230129/5ace9b5ef00dd3b2f8723576bec74d891463934777.png?_w_=320&_h_=320&x-oss-process=image%2Fformat%2Cwebp',
						title: '一加 Buds Ace 降噪游戏耳机 独白',
						price: 209
					},
					{
						imgurl: 'https://msecfs.opposhop.cn/commons-media-picture/GOODS/20221223/4374263976e2a8994045f278ab419704-1448223720.png?_w_=320&_h_=320&x-oss-process=image%2Fformat%2Cwebp',
						title: '一加 Buds Pro 2 旗舰耳机 乔木绿',
						price: 799
					},
					{
						imgurl: 'https://dsfs.oppo.com/omp/1666271491028-_-2c306e089ca944bc9c8a8cb5c89842ce.png?_w_=1440&_h_=1440&x-oss-process=image%2Fformat%2Cwebp',
						title: 'OPPO Enco Air2 Pro 无线降噪耳机 月牙白',
						price: 209
					},
					{
						imgurl: 'https://dsfs.oppo.com/omp/1667549264601-_-730301fd1f2b43068a5f112b8b374662.png?_w_=320&_h_=320&x-oss-process=image%2Fformat%2Cwebp',
						title: 'OPPO Enco X2 镜夜黑 有线充版',
						price: 629
					},
					{
						imgurl: 'https://dsfs.oppo.com/omp/1660014980814-_-0e8fbdb287464e3cb046e8f1e894a6a6.png?_w_=320&_h_=320&x-oss-process=image%2Fformat%2Cwebp',
						title: 'OPPO Enco Air2i 真无线耳机 曜石黑',
						price: 149
					},
					{
						imgurl: 'https://msecfs.opposhop.cn/commons-media-picture/GOODS/20230925/d79485813d90f15a317063b88e5c94f02113825421.png?_w_=480&_h_=480&x-oss-process=image%2Fresize%2Cm_mfit%2Climit_1%2Cw_480%2Ch_480%2Fformat%2Cwebp',
						title: 'OPPO Enco Air2 新声版 真无线耳机 浅海蓝',
						price: 139
					},
					{
						imgurl: 'https://dsfs.oppo.com/omp/1666060870243-_-7bc925edc8844262803acebcf48f54b3.png?_w_=320&_h_=320&x-oss-process=image%2Fformat%2Cwebp',
						title: 'OPPO Watch SE  水墨灰',
						price: 139
					},
					{
						imgurl: 'https://dsfs.oppo.com/omp/1660129796666-_-3ad0588060dd42a09f45dd7b11c8277d.png?_w_=320&_h_=320&x-oss-process=image%2Fformat%2Cwebp',
						title: 'OPPO Watch 3 系列 新品手表',
						price: 1799
					},
					{
						imgurl: 'https://dsfs.oppo.com/omp/1660140066355-_-749b874d75cb4eea9a3e9b2722ade403.png?_w_=320&_h_=320&x-oss-process=image%2Fformat%2Cwebp',
						title: 'OPPO Watch 3 系列全智能手表',
						price: 1399
					},
					{
						imgurl: 'https://msecfs.opposhop.cn/commons-media-picture/GOODS/20230317/5ace9b5ef00dd3b2f8723576bec74d891545612205.png?_w_=320&_h_=320&x-oss-process=image%2Fformat%2Cwebp',
						title: 'OPPO Pad 2',
						price: 2799
					},
					{
						imgurl: 'https://dsfs.oppo.com/omp/1658805204562-_-2b70fe81cc0f4e0286c52f4caba608ce.png?_w_=320&_h_=320&x-oss-process=image%2Fformat%2Cwebp',
						title: 'OPPO Pad',
						price: 1799
					},
					{
						imgurl: 'https://msecfs.opposhop.cn/commons-media-picture/GOODS/20231115/dc20fe1c07c80f5264fbb7abee3f0e9c-1028576794.png?_w_=480&_h_=480&x-oss-process=image%2Fresize%2Cm_mfit%2Climit_1%2Cw_480%2Ch_480%2Fformat%2Cwebp',
						title: 'OPPO Pad Air2',
						price: 1199
					},
					{
						imgurl: 'https://dsfs.oppo.com/omp/1658806495726-_-78788009bb674b87adac96b56d8e7eda.png?_w_=320&_h_=320&x-oss-process=image%2Fformat%2Cwebp',
						title: 'OPPO Pad Air',
						price: 999
					},
					{
						imgurl: 'https://msecfs.opposhop.cn/commons-media-picture/GOODS/20230315/9b72a9ed7d20c7a714c43f2fa8d0d714-1177664044.png?_w_=320&_h_=320&x-oss-process=image%2Fformat%2Cwebp',
						title: 'OPPO Pad 2 智能触控键盘',
						price: 599
					},
					{
						imgurl: 'https://dsfs.oppo.com/archives/202202/2022022403021462173316cc2cf.png?_w_=321&_h_=320&x-oss-process=image%2Fformat%2Cwebp',
						title: 'OPPO Pencil 自研手写笔',
						price: 499
					},
					{
						imgurl: 'https://msecfs.opposhop.cn/commons-media-picture/GOODS/20230315/2ba9bc4f1dac017c94b53b710cf871d21254677820.png?_w_=1080&_h_=1080&x-oss-process=image%2Fformat%2Cwebp',
						title: 'OPPO Pad 2 智能皮套',
						price: 199
					},
					{
						imgurl: 'https://dsfs.oppo.com/omp/1661399246891-_-11a933014bfd4247959d458f8ac0d520.png?_w_=320&_h_=320&x-oss-process=image%2Fformat%2Cwebp',
						title: 'OPPO 智美生活 平板键盘',
						price: 349
					},
					{
						imgurl: 'https://dsfs.oppo.com/omp/1653879717341-_-5820248c1296428c8519bbe8af34de58.png?_w_=320&_h_=320&x-oss-process=image%2Fformat%2Cwebp',
						title: 'OPPO 智美生活 智能皮套',
						price: 99
					},
					{
						imgurl: 'https://msecfs.opposhop.cn/commons-media-picture/GOODS/20230423/5ace9b5ef00dd3b2f8723576bec74d89-1254496587.png?_w_=320&_h_=320&x-oss-process=image%2Fformat%2Cwebp',
						title: 'OPPO Type-C to Type-C 闪充数据线 12A 1米 DL152 支持 12A 大电流 白色',
						price: 49
					},
					{
						imgurl: 'https://dsfs.oppo.com/archives/202104/20210420100400607e3a1478bcb.png?_w_=320&_h_=320&x-oss-process=image%2Fformat%2Cwebp',
						title: 'OPPO GaN 氮化镓电源适配器 SuperVOOC 超级闪充 65W （含数据线）',
						price: 149
					},
					{
						imgurl: 'https://msecfs.opposhop.cn/commons-media-picture/GOODS/20230618/5ace9b5ef00dd3b2f8723576bec74d891909130294.png?_w_=320&_h_=320&x-oss-process=image%2Fformat%2Cwebp',
						title: '一加 USB-A to Type-C 闪充数据线 10A 1.5米 480Mbps 高速传输 支持 10A 大电流 红色',
						price: 69
					},
					{
						imgurl: 'https://dsfs.oppo.com/omp/1647424128736-_-f16b5685c88441688274198c1bb788d2.png?_w_=320&_h_=320&x-oss-process=image%2Fformat%2Cwebp',
						title: 'OPPO SUPERVOOC 80W 超级闪充充电器 白色',
						price: 189
					},
					{
						imgurl: 'https://dsfs.oppo.com/omp/1655712411920-_-8e0727350e3b4bc7b95c4644c70d66ad.png?_w_=1120&_h_=1120&x-oss-process=image%2Fformat%2Cwebp',
						title: 'OPPO USB Type-C 普通版数据线',
						price: 29
					},
					{
						imgurl: 'https://dsfs.oppo.com/archives/201904/201904190404255cb9875d4e6d4.png?_w_=1120&_h_=1120&x-oss-process=image%2Fformat%2Cwebp',
						title: 'O-Fresh立体声耳机 深邃黑 3.5mm接口',
						price: 49
					},
					{
						imgurl: 'https://msecfs.opposhop.cn/commons-media-picture/GOODS/20230803/4374263976e2a8994045f278ab419704966524635.png?_w_=480&_h_=480&x-oss-process=image%2Fresize%2Cm_mfit%2Climit_1%2Cw_480%2Ch_480%2Fformat%2Cwebp',
						title: '一加45W液冷散热器磁吸无线充版 冰川白 官方标配',
						price: 599
					},
					{
						imgurl: 'https://dsfs.oppo.com/omp/1666949620241-_-b7ad34ed3acd4308a405cf75a2b4dfe0.png?_w_=1080&_h_=1080&x-oss-process=image%2Fformat%2Cwebp',
						title: 'OPPO Type-C 闪充数据线 白色',
						price: 29
					},
					{
						imgurl: 'https://dsfs.oppo.com/omp/1652874012264-_-0ea7579a048e40079abc8c0b359f288d.png?_w_=320&_h_=320&x-oss-process=image%2Fformat%2Cwebp',
						title: 'SUPERVOOC 80W 超级闪充车载充电器 黑色',
						price: 169
					}
				]

			}
			
		},
		onLoad() {
			this.timer = setInterval(()=>{
				this.showtime()
			})
		},
		methods: {
			changeIndicatorDots(e) {
				this.indicatorDots = !this.indicatorDots
			},
			changeAutoplay(e) {
				this.autoplay = !this.autoplay
			},
			intervalChange(e) {
				this.interval = e.target.value
			},
			durationChange(e) {
				this.duration = e.target.value
			},
			Totop() {
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 300
				});
			},
			showtime () {
							let nowtime = new Date(),  
							endtime = new Date("2023/12/15");  
							let lefttime = endtime.getTime() - nowtime.getTime(),  
							leftd = Math.floor(lefttime/(1000*60*60*24)),  
							lefth = Math.floor((lefttime/(1000*60*60)%24)+leftd*24) < 10 ? "0" + Math.floor((lefttime/(1000*60*60)%24)+leftd*24) : Math.floor((lefttime/(1000*60*60)%24)+leftd*24),  //计算小时数
							leftm = Math.floor(lefttime/(1000*60)%60) < 10 ? "0" + Math.floor(lefttime/(1000*60)%60) : Math.floor(lefttime/(1000*60)%60),  //计算分钟数
							lefts = Math.floor(lefttime/1000%60) < 10 ? "0" + Math.floor(lefttime/1000%60) : Math.floor(lefttime/1000%60);  //计算秒数
							this.countdownh = lefth  
							this.countdownm = leftm
							this.countdowns = lefts  
						
							if(lefttime < 0) {
								this.countdownh = this.countdownm= this.countdowns = "00"
							}
						}
		},
		upper: function(e) {
			console.log(e)
		},
		lower: function(e) {
			console.log(e)
		},
		scroll: function(e) {
			console.log(e)
			this.old.scrollTop = e.detail.scrollTop
		},
		goTop: function(e) {
			// 解决view层不同步的问题
			this.scrollTop = this.old.scrollTop
			this.$nextTick(function() {
				this.scrollTop = 0
			});
			uni.showToast({
				icon: "none",
				title: "纵向滚动 scrollTop 值已被修改为 0"
			});
		}


	}
</script>

<style>
	.content {
		background-color: #F7F8FA;
		margin: 0 auto;
		width: 750rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.uni-margin-wrap {
		width: 750rpx;
		width: 100%;
	}

	.swiper {
		height: 413rpx;
	}

	.swiper-item {
		display: block;
		height: 413rpx;
		line-height: 413rpx;
		text-align: center;
	}

	.swiper-item image {
		width: 750rpx;
		height: 413rpx;
	}

	.shouyebox {
		background-color: white;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		padding-left: 10rpx;
		padding-right: 10rpx;
		font-size: 10rpx;
	}

	.border1box {
		/* border: 2rpx solid white; */
		display: flex;
	}

	.border1box image {
		width: 726rpx;
		height: 216rpx;
		border-radius: 25rpx;
	}

	.backTotop image {
		background-color: white;
		position: fixed;
		z-index: 1;
		width: 60rpx;
		height: 60rpx;
		border-radius: 5px;
		right: 35rpx;
		bottom: 200rpx;

	}

	.jrbq {
		width: 750rpx;
		height: 212rpx;
	}

	.scroll-view_H {
		white-space: nowrap;
		width: 100%;
	}

	.scroll-view-item {
		height: 300px;
		line-height: 300px;
		text-align: center;
		font-size: 36px;
	}

	.scroll-view-item_H {
		display: inline-block;
		width: 100%;
		height: 300px;
		line-height: 300px;
		text-align: center;
		font-size: 36px;
	}

	.scroll-view {
		font-size: 14rpx;
		text-align: center;
		width: 104rpx;
		height: 149rpx;
	}

	.scroll-x-box {
		display: flex;
	}

	/* 容器里面的项目一行排不下会自动压缩 */
	/* .scroll-x-box view{
		width: 150rpx;
		/* 项目属性，设置项目不压缩 
		flex-shrink: 0;
	} */
	.scroll-x-box image {
		width: 92rpx;
		height: 92rpx;
	}

	.jrms {
		width: 104rpx;
		position: relative;
		line-height: 25rpx;
		max-height: 25rpx;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	.time{
		display: flex;
		justify-content: left;
	}
	.shijian{
		/* padding-top: 8rpx; */
	}
</style>
